﻿<!DOCTYPE html>
<html lang="zn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>
           国际物流管理
    </title>
	<base th:href="@{/}"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="static/css/x-admin.css" media="all">
    <link rel="stylesheet" href="static/css/backstage.css" media="all">
	<script src="static/js/layui/layui.js" charset="utf-8"></script>
	<script src="static/js/x-layui.js" charset="utf-8"></script>
	<script src="static/js/jquery.js" charset="utf-8"></script>
	<link rel="stylesheet" href="static/kindeditor/themes/default/default.css"/>
	<link rel="stylesheet" href="static/kindeditor/plugins/code/prettify.css"/>
	<script charset="utf-8" src="static/kindeditor/kindeditor-all-min.js"></script>
	<script charset="utf-8" src="static/kindeditor/lang/zh-CN.js"></script>
	<script charset="utf-8" src="static/kindeditor/plugins/code/prettify.js"></script>
	<script charset="utf-8" src="static/js/jquery.min.js"></script>

    <script>
        var editor1;
        var curentModuleId="1";  //用来记载当前正在编辑的选项卡是哪个
       
        //显示某个类型的物流信息
        function initData(id){
        	$.ajax({
    			url:"mflow/mflowByModuleId",
    			data:{id:id},
    			async:false,
    			success:function(result){
    				var m=result.t;
    				$("#title").val(m.title);
    				$("#id").val(m.id);
    				editor1.html(m.detail);
    			},
    			error:function(data){
    				alert("出错了:"+ data);
    			}
    		});
        	
        	switchTab(id);
        	curentModuleId=id;
        }
        
    </script>
</head>

<body>
<div class="wrap">

	<div class="x-nav">
	    <div class="title">
	        <a><cite>国际物流管理</cite></a>
	    </div>
	     <ul class="tabpage" id="logistics">
	            <li><a href="javascript:void(0); " onclick="initData('1')"  class="list" >海运</a></li>
	            <li><a href="javascript:void(0); " onclick="initData('2')" >陆运</a></li>
	            <li><a href="javascript:void(0); " onclick="initData('3')" >空运</a></li>
	            <li><a href="javascript:void(0); " onclick="initData('4')" >物流仓</a></li>
	     </ul>
	</div>
	<div class="x-body">

		<form id="form1"  class="fom">
            <table class="infotable" >
				  <tr>         
					<td width="15%"> 
					  	<label>标 题：  </label>              				  
					</td>
					<td width="55%" colspan="2">
					    <input   type="hidden" id="id" name="id">
						<input type="text" value="海运" name="title" class="inp" style="width:300px"  id="title"/>
					</td>
					
				  </tr>
				  <tr>     
					<td> 
					  	<label> 详细内容：</label>              				  
					</td>
					<td colspan="2">
						<p class="msg" id="detail_msg"></p>
						<textarea id="detail" name="detail"   class="content" placeholder="请输入内容" ></textarea>
						 <input type="hidden" name="detail2" id="detail2" />
					</td>				
				  </tr>
				  <tr>
					<td> </td>
					<td colspan="2">				  
						<input type="button" id="addBtn1"  class="btn" value="提交"/>                  
						<input type="button" id="preview"  class="btn" value="预览"/>  				 
					</td>
			 	 </tr>
			  </table> 
		</form>       
	</div>
</div>


<script> 

	function switchTab(id){
	    $(".tabpage li a").removeClass("list")
	    $(".tabpage li").eq(id-1).find("a").addClass("list")
	}

   $(function(){
	   //富文本
	    KindEditor.ready(function (K) {
	            editor1 = K.create('textarea[id="detail"]', {
	            cssPath: 'static/kindeditor/plugins/code/prettify.css',
	            height: '400px',
	            uploadJson: '../admin/uploadimg', //对应后台controller
	            //	fileManagerJson : '${APP_PATH}/kindeditor/jsp/file_manager_json.jsp',
	            allowFileManager : false,
	            allowImageRemote: false,
	            afterBlur: function () {  //解决js无法提交的bug
	                this.sync();
	            }
	        });
	        prettyPrint();

	        //显示数据
	        initData("1");
	    });


	    //提交国际物流 #addBtn1 #form1
	    $("#addBtn1").click(function () {
	    	$("#detail_msg").text("");
	        if( editor1.html()==""){
	            $("#detail_msg").text("详细内容不能为空");
	        }
	        else{

	        	if(confirm("确认提交吗")==false){
	        		return;
	        	}

	            var formData = new FormData($('#form1')[0]);
	            $.ajax({
	                type: "POST",
	                url: "mflow/updateflow",
	                data: {id:$("#id").val(), detail:editor1.html(),title:$("#title").val()},
	            //  processData: false,
	            //  contentType: false,
	                success: function (data) {
	                    alert("修改成功！");
	                }
	            });
	        
	        }
	        
	        return false;
	    });


	    //预览
	    $("#preview").click(function(){
	        $(":input[name='detail2']").val(editor1.html()); //隐藏域
	        aboutPreview();
	    });

	    //国际物流预览
	    function aboutPreview(){
	        //设置html5本地存储
	        var formData = new FormData($('#form1')[0]);

	        var objData = {};
	        formData.forEach((value, key) => objData[key] = value);
	        sessionStorage.setItem("aboutpre", JSON.stringify(objData));
	        var tempwindow=window.open('_blank');
	        tempwindow.location.href="mflow/aboutPreview";
	    }

   });
  
</script>

</body>

</html>